<template>
  <section class="table-wrap">
    <el-table ref="table"
              :data="currentData"
              style="width: 100%"
              max-height="485"
              height="475"
              border
              @selection-change="handleSelectionChange">
      <el-table-column v-if="selectionFlag"
                       type="selection"
                       width="50">
      </el-table-column>
      <template v-for="(item, index) in tableHeaderData">
        <el-table-column v-if="item.type === 'contractNo'"
                         :key="index + `${item.label}`"
                         fixed="left"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div class="opertionSty">
              <div v-if="!billId || status === 0 || dialogFlag">{{ scope.row.contractNo }}</div>
              <link-detail v-else
                           :value="`${scope.row.contractNo}`"
                           :row="scope.row"
                           :url="path"
                           :params-data="paramsData"
                           :copy-visable="false"
                           v-bind="$attrs" />
              <span v-if="scope.row.combineContractNo"
                    class="order-type">
                合
              </span>
              <el-tooltip v-if="
                  scope.row.goodsException && ![20, 50].includes(status)
                "
                          effect="dark"
                          content="货物异常"
                          placement="top">
                <icon-svg icon-name="yichang"
                          class="iconSty mlr10" />
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'fromInfo'"
                         :key="index+`${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <ShipmentSenderInfo :row="scope.row"
                                :flag="flagClass(scope.row)"
                                :value="infoValues(scope.row)"
                                class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'fromAddress'"
                         :key="index+`${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <ShipmentSenderAddress :row="scope.row"
                                   :flag="flagClass(scope.row)"
                                   :value="addressValues(scope.row)"
                                   class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'toInfo'"
                         :key="index + `${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <waybill-consignee-sender-info :row="scope.row"
                                           :class-flag="scope.row.status != 50 && ![20, 50].includes(status) ? 'red' : '' "
                                           class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'toAddress'"
                         :key="index + `${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <waybill-consignee-sender-address :row="scope.row"
                                              :class-flag="scope.row.status != 50 && ![20, 50].includes(status) ? 'red' : ''"
                                              class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'orderInfo'"
                         :key="index + `${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <order-info class="tooltipSty"
                        :row="scope.row"
                        :class-flag="
                scope.row.status != 50 && ![20, 50].includes(status)
                  ? 'red'
                  : ''
              "
                        :name="dialogFlag ? 'billWayinfo' : 'billContent'" />
          </template>
        </el-table-column>
        <!-- 承运方 -->
        <el-table-column v-else-if="item.type === 'carrierName' && createType === 2"
                         :key="index + `${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <!-- <div>{{scope.row.carrierName}}</div>
            <div v-if="scope.row.driverName">{{scope.row.driverName}}</div> -->
            <CarrierInfo class="tooltipSty"
                         :row="scope.row" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'carInfo'"
                         :key="index + `${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <car-info :row="scope.row"
                      :class-flag="
                scope.row.status != 50 && ![20, 50].includes(status)
                  ? 'red'
                  : ''
              "
                      class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'billFee'"
                         :key="index + `${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`115px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <object-fee :row="scope.row"
                        :obj-name="'waybillCache'"
                        :field-name="`${item.props}`"
                        :class-flag="
                scope.row.status != 50 && ![20, 50].includes(status)
                  ? 'red'
                  : ''
              "
                        class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'totalFee'"
                         :key="index + `${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`115px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <bill-fee :row="scope.row"
                      :field-name="`${item.props}`"
                      :obj-name="'waybillCache'"
                      :quote-flag="scope.row.quoteFlag"
                      :class-flag="
                scope.row.status != 50 && ![20, 50].includes(status)
                  ? 'red'
                  : ''
              "
                      class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'time'"
                         :key="index + `${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div v-if="scope.row[item.timeName]"
                 :class="
                scope.row.status != 50 && ![20, 50].includes(status)
                  ? 'red'
                  : ''
              ">
              <span>{{
                $moment(scope.row[item.timeName]).format("YYYY-MM-DD HH:mm")
              }}</span>
            </div>
            <div v-else
                 :class="
                scope.row.status != 50 && ![20, 50].includes(status)
                  ? 'red'
                  : ''
              ">
              --
            </div>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'operation'"
                         :key="index + `${item.label}`"
                         fixed="right"
                         :prop="item.type"
                         :label="item.label"
                         :width="`90px`">
          <template slot-scope="scope">
            <el-button :disabled="!billId"
                       type="text"
                       @click="remove(scope.$index, scope.row.waybillId)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'problemDesc'"
                         :key="index + `${item.label}`"
                         fixed="right"
                         :prop="item.type"
                         :label="item.label"
                         :width="`340px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div v-if="status && status === 40"
                 class="problemDescSty">
              {{ scope.row.problemDesc }}
            </div>
            <el-input v-else
                      v-model="scope.row.problemDesc"
                      maxlength="200"
                      style="width: calc(100% - 40px)"
                      @blur="handleUpdate(scope.row.waybillId, scope.row.problemDesc)" />
          </template>
        </el-table-column>
        <el-table-column v-else
                         :key="index + `${item.label}`"
                         :prop="item.type"
                         :label="item.label"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div v-if="scope.row[item.type]"
                 :class="
                scope.row.status != 50 && ![20, 50].includes(status)
                  ? 'red'
                  : ''
              ">
              {{ scope.row[item.type] }}
            </div>
            <div v-else
                 :class="
                scope.row.status != 50 && ![20, 50].includes(status)
                  ? 'red'
                  : ''
              ">
              --
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- 总计 -->
    <el-table v-show="totalFlag && billId"
              ref="totalTable"
              v-loading="totalLoading"
              class="totalSty"
              :data="totalData"
              :show-header="false"
              :row-class-name="tableRowClassName"
              border
              style="width: 100%">
      <el-table-column v-if="selectionFlag"
                       width="50" />
      <template v-for="(item, index) in tableHeaderData">
        <el-table-column v-if="item.type === 'orderInfo'"
                         :key="index + `${item.type}`"
                         :prop="item.type"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <order-info class="tooltipSty"
                        :row="scope.row"
                        :name="'billTotal'" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'contractNo'"
                         :key="index + `${item.type}`"
                         :prop="item.type"
                         :width="`${colWidth}px`"
                         :show-overflow-tooltip="true"
                         fixed="left">
          <template slot-scope="scope">
            {{ scope.row[item.type] }}
          </template>
        </el-table-column>
        <el-table-column v-else
                         :key="index + `${item.type}`"
                         :prop="item.type"
                         :width="`${
            ['billFee', 'totalFee'].includes(item.type) ? '115' : colWidth
          }px`"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div v-if="item.props">{{ formatNumber(scope.row[item.props]) }}</div>
            <div v-else-if="scope.row[item.type]">
              {{ scope.row[item.type] }}
            </div>
            <div v-else></div>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </section>
</template>

<script>
import WaybillConsigneeSenderAddress from "@components/table/column/WaybillConsigneeSenderAddress.vue";
import WaybillConsigneeSenderInfo from "@components/table/column/WaybillConsigneeSenderInfo.vue";
// import ShippingInfo from "@components/table/column/ShippingInfo.vue";
import ShipmentSenderInfo from "@components/table/column/ShipmentSenderInfo.vue"
import ShipmentSenderAddress from "@components/table/column/ShipmentSenderAddress.vue"
import OrderInfo from "@components/table/column/OrderInfo.vue";
import CarInfo from "@components/table/column/CarInfo.vue";
import LinkDetail from "@components/table/column/LinkColumn.vue";
import ObjectFee from "@components/table/column/ObjectColumn.vue";
import BillFee from "@components/table/column/billFee/BillFee.vue";
import CarrierInfo from "@components/table/column/CarrierInfo.vue";
import { finance } from "@/api/index";
import _ from 'lodash'
export default {
  name: "AccountList",
  components: {
    WaybillConsigneeSenderInfo,
    WaybillConsigneeSenderAddress,
    // ShippingInfo,
    ShipmentSenderInfo,
    ShipmentSenderAddress,
    OrderInfo,
    ObjectFee,
    BillFee,
    CarInfo,
    CarrierInfo,
    LinkDetail
  },
  props: {
    billId: {
      type: [Number, String],
      default: () => null
    },
    // 当前页数据源
    currentData: {
      type: Array,
      default: () => []
    },
    // 总数据源
    totalData: {
      type: Array,
      default: () => []
    },
    pageSize: {
      type: Number,
      default: () => 10
    },
    page: {
      type: Number,
      default: () => 1
    },
    colWidth: {
      type: Number,
      default: () => 162
    },
    selectionFlag: {
      type: Boolean,
      default: true
    },
    operationFlag: {
      type: Boolean,
      default: false
    },
    status: {
      type: Number,
      default: () => null
    },
    dialogFlag: {
      type: Boolean,
      default: false
    },
    // 发货方、收货方信息 是否只显示两行
    shipOrsend: {
      type: Boolean,
      default: false
    },
    createType: {
      type: Number || String,
      default: () => null
    },
    // 合计显示
    totalFlag: {
      type: Boolean,
      default: false
    },
    // 合计loading
    totalLoading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      visible: false,
      paramsData: ["waybillId"],
      selectData: [],
      activeAmount: {
        totalWeight: 0,
        totalVolume: 0,
        weight: null,
        volumn: null
      },
      activeIndex: null
    };
  },
  computed: {
    path () {
      const { name } = this.$route
      return ['customerAccountStatement', 'customerAccountStatementWindow'].includes(name) ? 'customerFinanceWayFee' : 'wayFeeDetail'
    },
    formatNumber () {
      return num => num ? Number(num).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') : 0;
    },
    flagClass () {
      return row => row.status != 50 && ![20, 50].includes(this.status) ? 'red' : ''
    },
    infoValues () {
      return row => {
        return {
          contactName: row.toContactName,
          contactMobile: row.toContactMobile
        }
      }
    },
    addressValues () {
      return row => {
        return {
          province: row.fromProvince,
          city: row.fromCity,
          district: row.fromDistrict,
          address: row.fromAddress
        }
      }
    },
    tableHeaderData () {
      let arr = [
        { label: "合同编号", type: "contractNo" },
        { label: "合单号", type: "combineContractNo" },
        { label: "发货方信息", type: "fromInfo" },
        { label: "发货地址", type: "fromAddress" },
        { label: "收货方信息", type: "toInfo" },
        { label: "收货地址", type: "toAddress" },
        { label: "运单信息", type: "orderInfo" },
        { label: "物品价值（元）", type: "billFee", props: "totalValue" },
        { label: "车型", type: "carInfo" },
        { label: "发货时间", type: "time", timeName: "fromTime" },
        { label: "收货时间", type: "time", timeName: "toTime" },
        { label: "总运费（元）", type: "totalFee", props: "totalFee" },
        { label: "回执付款", type: "billFee", props: "receiptFee" },
        { label: "预付款", type: "billFee", props: "prepayFee" },
        { label: "货到付款", type: "billFee", props: "arrivePayFee" },
        { label: "代收货款", type: "billFee", props: "collectionFee" },
        { label: "零担费", type: "billFee", props: "divideFee" },
        { label: "整车费", type: "billFee", props: "wholeFee" },
        { label: "提货费", type: "billFee", props: "pickFee" },
        { label: "送货费", type: "billFee", props: "deliverFee" },
        { label: "装货费", type: "billFee", props: "loadFee" },
        { label: "卸货费", type: "billFee", props: "unloadFee" },
        { label: "保险费", type: "billFee", props: "insureFee" },
        { label: "税费", type: "billFee", props: "taxFee" },
        { label: "补充费用", type: "billFee", props: "surchargeFee" },
        { label: "运单状态", type: "statusDesc" },
        { label: "签收时间", type: "time", timeName: "signAt" },
        { label: "单据编号", type: "orderNo" },
        { label: "备注", type: "desc" }
      ]
      if (this.createType === 2) {
        arr.splice(6, 0, {
          label: "承运方名称",
          type: "carrierName"
        });
      }
      console.log("=====operationFlag", this.operationFlag)
      if (this.operationFlag) {
        arr.push({
          label: "操作",
          type: "operation"
        });
      }
      if (this.status && [10, 40].includes(this.status)) {
        arr.splice(arr.length - 1, 0, {
          label: "问题描述",
          type: "problemDesc"
        });
      }
      return arr;
    }
  },
  watch: {
    billId: {
      immediate: true,
      handler (value) {
        if (value) {
          this.syncScroll();
        }
      }
    }
  },
  mounted () {
    this.syncScroll();
  },
  // destroyed () {
  //   this.syncScroll() //销毁监听
  // },
  methods: {
    // 滚动条同步
    syncScroll () {
      if (this.totalFlag && this.billId) {
        let tableWrap = this.$refs.table?.bodyWrapper;
        let totalWrap = this.$refs.totalTable?.bodyWrapper;
        if (tableWrap && totalWrap) {
          tableWrap.addEventListener("scroll", () => {
            totalWrap.scrollLeft = tableWrap?.scrollLeft;
          });
          totalWrap?.addEventListener("scroll", () => {
            tableWrap.scrollLeft = totalWrap?.scrollLeft;
          });
        }
      }
    },
    tableRowClassName () {
      return "totalRowSty";
    },
    // 移出
    remove: _.debounce(function (index, waybillId) {    // 触发事件
      if (this.billId) {
        this.$emit(
          "deleteHandel",
          this.pageSize * (this.page - 1) + index,
          waybillId
        );
      } else {
        this.$emit("valid");
      }
    }, 600),
    // 多选
    handleSelectionChange (data) {
      this.selectData = data;
    },
    // 修改明细
    handleUpdate (waybillId, val) {
      if (!val) return;
      this.updateRes({ billId: this.billId, problemDesc: val, waybillId });
    },
    async updateRes (params) {
      await finance.updateRes(params);
      this.$emit("update:descFlag", true);
    }
  }
};
</script>

<style lang="scss" scoped>
.table-wrap {
  padding: 0px 20px;
  ::v-deep .el-table--small {
    margin-bottom: 10px;
  }
}
.totalSty /deep/ .el-table__body-wrapper {
  overflow-x: hidden !important;
}
.opertionSty {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.opertion-action {
  color: var(--prev-icon-color-orange);
}
.iconSty {
  width: 14px;
  height: 14px;
}
/**
 * 火狐tooltip不显示问题
 */
.tooltipSty {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline;
}
.red {
  color: var(--prev-color-text-red);
}
.problemDescSty {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/deep/ .el-table .totalRowSty {
  background-color: var(--prev-bg-lightgrey) !important;
}
/deep/ .el-table__fixed {
  bottom: 0px !important;
}
</style>
